<template>
    <div id='colorTags'>
    <color-medium
    v-for='(color_medium,index) in color_mediums'
    :key='color_medium[0]+index'
      :color_medium='color_medium'
      :color_basics='color_basics[index]'
      :isCurrent='index === medium_idx'
      ref="colorMedium"

      @pickColorTag='pickColorTag(index,$event)'
      @moveColorBasic="$emit('moveColorBasic',index,$event)"
    ></color-medium>
    </div>
</template>

<script>

import colorMedium from './colormedium'

export default {
    name:'colorTags',
    components:{
        colorMedium
    },
    props:['color_mediums','color_basics'],
    data(){
        return{
            medium_idx:0,
            basic_idx:0,
        }
    },
    mounted(){
        setTimeout(()=>{
            this.$refs.colorMedium[0].current_idx = 0;
        },400)
    },
    methods:{
    pickColorTag(medium_idx,basic_idx) {
      if(this.medium_idx != medium_idx && this.medium_idx<this.color_mediums.length){
        this.$refs.colorMedium[this.medium_idx].current_idx = -1
      }
      this.medium_idx = medium_idx
      this.basic_idx = basic_idx
      this.$emit('pickColorTag',medium_idx,basic_idx)
    },
    isOverMedium(x,y){
        let color_mediums = this.$refs.colorMedium
        for(let i=0;i<color_mediums.length;i++){
            let color_medium = color_mediums[i].$el
            if(color_medium.offsetLeft<x&& x<color_medium.offsetLeft+color_medium.offsetWidth&&
                color_medium.offsetTop<y&& y<color_medium.offsetTop+color_medium.offsetHeight){
                return i
            }
        }
        return -1
    },
    isOverBasic(x,y){
        let active_idx,medium_idx = this.isOverMedium(x,y)
        if(medium_idx > -1){
         active_idx =  [medium_idx,this.$refs.colorMedium[medium_idx].isOverBasic(x,y)]
        }
        else{
             active_idx =[-1,-1]
        }
        return active_idx
    },
    }
}
</script>

<style scoped>


</style>